<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
    <div class="utmost">
        <div class="head">
            <button id="Start">开始游戏</button>
        </div>
        <div class="content">
            <div style="height: 60px; line-height: 60px; 
            background-image: linear-gradient(to right,pink,rgb(0, 225, 255) 10%,yellow);">
                <span>倒计时:</span>
                <div id="timer">60</div>
                <span>得分:</span>
                <div class="score">0</div>
            </div>

            <div style="margin-top: 3rem;">
                <div class="small" id="ds_1"></div>
                <div class="small" id="ds_2"></div>
                <div class="small" id="ds_3"></div>
                <div class="small" id="ds_4"></div>
                <div class="small" id="ds_5"></div>
                <div class="small" id="ds_6"></div>
                <div class="small" id="ds_7"></div>
                <div class="small" id="ds_8"></div>
                <div class="small" id="ds_9"></div>
            </div>


        </div>
    </div>
</body>
<script>
    var flag = 0;//标记游戏是否已经开始,0未开始
    var score = 0;//分数

    $('#Start').click(function () { //倒计时函数
        if(flag == 1) {
            alert('游戏已经开始')
        } else{
            falg = 1
            let intDiff = parseInt(60); //倒计时总秒数量
            let timeID;
            timeID = setInterval(function () { //开始计时器
                var second = 0; //时间默认值
                if(intDiff > 0){
                    second = Math.floor(intDiff);  //返回一个数字，代表分钟的秒
                    // console.log(second);
                    //每秒生成随机老鼠
                    $("[id^='ds_']").removeClass('black');
                    var rand = parseInt(Math.random() * 9 + 1); //生成随机数1-9
                    // console.log(rand);
                    var div_id = "ds_" + rand
                    $('#' + div_id).addClass('black');//添加多个类名
                } else {
                    //游戏结束
                    flag = 0; //倒计时结束, 标识符变为0
                    score = 0; //总分归零
                    window.clearInterval(timeID); //停止计时器
                }
                $('#timer').html(second + '秒'); //渲染倒计时
                intDiff--;
            }, 600)
        }
    });

    //id^='ds'表示查找id以ds开头的所有元素，例如id="dsdd" id="dshhhh" 都是符合的元素

    $("div[id^='ds_']").on('click', function (e) {
        //hasClass() 方法检查被选元素是否包含指定的类名称
        if($(this).hasClass('black')) {  
            $(this).removeClass('black')  
            score++;
            $('.score').text(score)
        }
    })
</script>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .utmost {
        width: 100%;
        height: 100%;
        margin: auto;
    }

    .head {
        width: 100%;
        height: 100px;
        text-align: center;
        line-height: 100px;
    }

    #Start {
        width: 10rem;
        height: 60px;
        background-color: gold;
        border-radius: 5rem;
        font-size: 1.3rem;
        color: #fff;
    }

    .content {
        width: 30rem;
        height: 32rem;
        border: 1px solid #000;
        margin: auto;
        margin-top: 3rem;
    }

    span {
        font-size: 1.4rem;
        margin-left: 3rem;
    }

    #timer {
        width: 6rem;
        height: 3rem;
        border: 1px solid #000;
        font-size: 1.4rem;
        color: #000;
        display: inline-block;
        line-height: 4rem;
        margin-top: 5px;
    }

    .score {
        width: 6rem;
        height: 3rem;
        border: 1px solid #000;
        font-size: 1.4rem;
        color: #000;
        display: inline-block;
        line-height: 4rem;
        margin-top: 5px;
    }

    .small {
        width: 7.4rem;
        height: 5rem;
        background-color: aqua;
        line-height: 5rem;
        font-size: 3rem;
        text-align: center;
        margin-top: 1rem;
        margin-left: 2rem;
        float: left;
    }
    .small:keydown{
        background: #D3D3D3;
    }

    .black {
      background: url(./img/yuque_diagram.png);
      background-size: 100%;
    }
</style>
</html>